$button-hover-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2) !default;
$button-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1) !default;
$button-border-radius: $border-radius !default;
$button-shadow: none !default;

$button-sizes: () !default;

$button-sizes: map-merge(
  (
    md: (
      font-size: 1.0625rem,
      padding: 0 2rem,
      line-height: 2.1875rem,
      height: 2.1875rem,
      font-weight: normal,
      icon: (
        font-size: 1.0625rem,
        height: auto,
        line-height: 2.1875rem,
        width: 1.25rem
      ),
      text-with-icon-padding: 0 1.375rem,
      icon-only-padding: 0 0.5rem
    ),
    sm: (
      font-size: 0.875rem,
      padding: 0 2.875rem,
      line-height: 1.75rem,
      height: 1.75rem,
      icon: (
        font-size: 0.9375rem,
        height: auto,
        line-height: 1.75rem,
        width: 1.125rem
      ),
      text-with-icon-padding: 0 1.375rem,
      icon-only-padding: 0 0.3125rem
    )
  ),
  $button-sizes
);

rz-button[type],
p-button[type] {
  -webkit-appearance: none;
}

$button-styles: () !default;

$button-styles: map-merge(
  (
    primary: (
      background-color: $primary
    ),
    light: (
      background-color: $light,
      color: $charcoal-grey
    ),
    secondary: (
      background-color: $secondary
    ),
    info: (
      background-color: $info
    ),
    warning: (
      background-color: $warning
    ),
    error: (
      background-color: $danger
    ),
    danger: (
      background-color: $danger
    ),
    success: (
      background-color: $success
    )
  ),
  $button-styles
);

.rz-button {
  -webkit-appearance: none;
  border-radius: $button-border-radius;
  color: $white;
  border: none;
  outline: none;
  line-height: initial;
  font-size: 1.0625rem;
  box-shadow: $button-shadow;

  &:focus {
    outline: none;
  }

  &:not(.rz-state-disabled) {
    cursor: pointer;

    &:hover {
      &:not(:active) {
        background-image: linear-gradient(rgba(#fff, 0.1), rgba(#fff, 0.1));
        box-shadow: $button-hover-shadow;
      }
    }

    &:active {
      background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0.1));
      box-shadow: $button-active-shadow;
    }
  }

  &.rz-state-disabled {
    opacity: 0.2;
  }

  .rz-button-text {
    vertical-align: middle;
    line-height: 1.5rem;
  }

  .rzi {
    vertical-align: middle;
  }

  @each $style, $button in $button-styles {
    &.btn-#{$style} {
      @each $name, $value in $button {
        #{$name}: #{$value};
      }
    }
  }

  @each $size, $button in $button-sizes {
    &-#{$size} {
      font-size: map-get($button, font-size);
      font-weight: map-get($button, font-weight);
      padding: map-get($button, padding);
      height: map-get($button, height);

      &.rz-button-text-icon-left {
        padding: map-get($button, text-with-icon-padding);
      }

      &.rz-button-icon-only {
        padding: map-get($button, icon-only-padding);
      }

      .rzi {
        @each $name, $value in map-get($button, icon) {
          #{$name}: #{$value};
        }
      }

      .rz-button-text {
        line-height: map-get($button, line-height);
      }
    }
  }
}

@keyframes button-icon-spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
